<template>
    <div class="page-container">
      <div class="tips">
        手动控制zoom等级
        <el-row>
          <el-button type="primary" @click="zoomIn">zoom+</el-button>
          <el-button type="danger" @click="zoomOut">zoom-</el-button>
        </el-row>
      </div>
      <div id="map"></div>
    </div>
  </template>
  
  <script>
  import Map from "ol/Map";
  import OSM from "ol/source/OSM";
  import TileLayer from "ol/layer/Tile";
  import View from "ol/View";
  
  export default {
    name: "baidu-map",
    data() {
      return {
        map: null,
      };
    },
    mounted() {
      this.initMap();
    },
    methods: {
      initMap() {
        this.map = new Map({
          layers: [
            new TileLayer({
              source: new OSM(),
            }),
          ],
          target: "map",
          view: new View({
            center: [0, 0],
            zoom: 2,
          }),
        });
      },
      zoomIn() {
        const view = this.map.getView();
        const zoom = view.getZoom();
        view.setZoom(zoom + 1);
      },
      zoomOut() {
        const view = this.map.getView();
        const zoom = view.getZoom();
        view.setZoom(zoom - 1);
      },
    },
  };
  </script>
  
  <style lang="scss" scoped>
  @import "ol/ol.css";
  .page-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    .tips {
      height: 100px;
    }
    #map {
      flex: 1;
    }
  }
  </style>
  